import { ReactElement, memo } from 'react';
import { ActionType } from '@ant-design/pro-table';
import { ModalForm } from '@ant-design/pro-form';
import EditFrom from '../form';
import { TableListItem } from '../../interface';
import { addProject } from '@/api';

type Props = {
  record: TableListItem;
  children: ReactElement;
  action?: ActionType;
};

const Edit = ({ record, children, action }: Props) => {
  return (
    <ModalForm
      initialValues={{ ...record, envLocation: undefined }}
      onFinish={async (values) => {
        await addProject({ ...values });

        action && action.reload();

        return true;
      }}
      trigger={children}
      submitter={{
        submitButtonProps: {
          style: {
            display: 'none',
          },
        },
      }}
    >
      <EditFrom record={record} type="edit" />
    </ModalForm>
  );
};

export default memo(Edit, (prevProps, nextProps) => {
  return prevProps.record.id === nextProps.record.id;
});
